<template>
<div class="container-wid">
  <my-header></my-header>
  <div class="container-inner">
    <ul class="nav nav-tabs ability-tab">
      <li role="presentation" @click="changeTab(key,$event)" v-if="permission_tabs[permission].indexOf(key)!==-1" :class="{'active':active_content===key}" :data-key='key' v-for="(value, key) in ability" v-bind:key="key">
        <a>{{value}}</a>
      </li>
    </ul>
    <div class="main">
      <person-detail class="tab-content" id="personal_detail" v-if="permission_tabs[permission].indexOf('personal_detail')!==-1" :style="{display:(active_content==='personal_detail'? 'block':'none')}"></person-detail>
      <class-signin class="tab-content" id="class_sign_in" v-if="permission_tabs[permission].indexOf('class_sign_in')!==-1" :style="{display:(active_content==='class_sign_in'? 'block':'none')}"></class-signin>
      <student-status :uid="id" class="tab-content" id="students_status" v-if="permission_tabs[permission].indexOf('students_status')!==-1" :style="{display:(active_content==='students_status'? 'block':'none')}"></student-status>
      <signup-records :uid="id" class="tab-content" id="signup_records" v-if="permission_tabs[permission].indexOf('signup_records')!==-1" :style="{display:(active_content==='signup_records'? 'block':'none')}"></signup-records>
    </div>
  </div>

  <!-- <my-footer></my-footer> -->
</div>

</template>

<script>
import myHeader from "../header/header.vue";
import myFooter from "../footer/footer.vue";
import personDetail from "./personDetail/personDetail";
import classSignin from "./classSignin/classSignin";
import studentStatus from "./studentStatus/studentStatus";
import signupRecords from './signupRecords/signupRecords'

const qs = require("qs");
export default {
  name: "home",
  data() {
    return {
      ability: {
        personal_detail: "个人信息",
        class_sign_in: "班级签到",
        students_status: "学生在校情况",
        signup_records: '签到记录查询'
      },

      permission: window.localStorage.permission,
      _t_s_l_: window.localStorage._t_s_l_,
      expire: window.localStorage.expire,
      id: window.localStorage.id,
      permission_tabs: {
        student: ["personal_detail"],
        monitor: ["personal_detail", "class_sign_in"],
        manage: ["students_status", 'signup_records']
      },
      active_content: "personal_detail",
      // this.permission_tabs[this.permission][0],
      
      
    };
  },
  components: {
    myHeader,
    myFooter,
    personDetail,
    classSignin,
    studentStatus,
    signupRecords
  },
  
  created() {
    const storage = window.localStorage;
    if (!storage._t_s_l_ || new Date(storage.expire) < new Date()) {
      this.cleanStorage();
      this.$router.replace('/')
    }
    this.active_content = this.permission_tabs[storage.permission][0];
    
  },
  methods: {
    cleanStorage() {
      window.localStorage.clear();
    },
    changeTab(tab_name, $event) {
      this.active_content = tab_name;
      $event.stopPropagation();
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import "./css/home.less";
.ability-tab {
  margin-top: 30px;
  li {
    cursor: pointer;
  }
  a {
    color: #000;
  }
}
.status-table {
  padding: 20px 10px;
  width: 100%;
  height: 90%;
  margin: auto;
}
.container-inner {
  width: 860px;
  margin: 10px auto;
}
</style>
